<script lang="ts" setup>
  import {
    // Carousel,
    // CarouselItem,
    // Tag,
    Card,
  } from '@arco-design/web-vue';
  import { RouterLink } from 'vue-router';
  import { IconDoubleRight } from '@arco-design/web-vue/es/icon';
  import typeOne from '/@/assets/pins/1.svg';
  import typeTwo from '/@/assets/pins/2.svg';
  import typeThree from '/@/assets/pins/3.svg';
  import redImg from '/@/assets/pins/red.svg';
  import blueImg from '/@/assets/pins/blue.svg';
  import yellowImg from '/@/assets/pins/yellow.svg';
</script>
<template>
  <Card :bordered="false">
    <a-row>
      <a-col :span="8">
        <div class="flex items-center justify-between px-[10px] mb-[8px]">
          <div class="flex items-center">
            <div class="mr-[10px] relative w-[20px] h-[20px]">
              <img class="absolute w-[20px] h-[20px]" :src="redImg" alt="" srcset="" />
              <img
                class="absolute w-[20px] h-[20px] z-10 px-[3px]"
                :src="typeOne"
                alt=""
                srcset=""
              />
            </div>
            <span class="font-[900] text-[15px] text-[#252933]">综合文章榜</span>
          </div>
          <div class="text-[12px] text-gray-500">
            <RouterLink to="/hot/articles"
              >更多
              <IconDoubleRight />
            </RouterLink>
          </div>
        </div>
        <ol class="text-[15px]">
          <li class="flex ml-[15px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FF0000] to-[#FFA800]"
              >1</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
          <li class="flex ml-[15px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FF6B00] to-[#FFE600]"
              >2</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
          <li class="flex ml-[15px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FFE600] to-[#9EFF00]"
              >3</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
        </ol>
      </a-col>
      <a-col :span="8">
        <div class="flex items-center justify-between px-[15px] mb-[8px]">
          <div class="flex items-center">
            <div class="mr-[10px] w-[20px] h-[20px] relative">
              <img class="absolute w-[20px] h-[20px]" :src="blueImg" alt="" srcset="" />
              <img class="absolute w-[20px] h-[20px] px-[3px]" :src="typeTwo" alt="" srcset="" />
            </div>
            <span class="font-[900] text-[15px] text-[#252933]">精选专栏榜</span>
          </div>
          <div class="text-[12px] text-gray-500">更多<IconDoubleRight /></div>
        </div>
        <ol class="text-[15px]">
          <li class="flex ml-[20px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FF0000] to-[#FFA800]"
              >•</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
          <li class="flex ml-[20px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FF6B00] to-[#FFE600]"
              >•</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
          <li class="flex ml-[20px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FFE600] to-[#9EFF00]"
              >•</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
        </ol>
      </a-col>
      <a-col :span="8">
        <div class="flex items-center justify-between px-[15px] mb-[8px]">
          <div class="flex items-center">
            <div class="mr-[10px] w-[20px] h-[20px] relative">
              <img class="absolute w-[20px] h-[20px]" :src="yellowImg" alt="" srcset="" />
              <img class="absolute w-[20px] h-[20px] px-[3px]" :src="typeThree" alt="" srcset="" />
            </div>
            <span class="font-[900] text-[15px] text-[#252933]">推荐收藏榜</span>
          </div>
          <div class="text-[12px] text-gray-500">更多<IconDoubleRight /></div>
        </div>
        <ol class="text-[15px]">
          <li class="flex ml-[20px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FF0000] to-[#FFA800]"
              >•</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
          <li class="flex ml-[20px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FF6B00] to-[#FFE600]"
              >•</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
          <li class="flex ml-[20px]">
            <div
              class="bg-clip-text w-[10px] font-black text-transparent bg-gradient-to-r from-[#FFE600] to-[#9EFF00]"
              >•</div
            >
            <div class="ml-[10px]">Architectural blueprints</div>
          </li>
        </ol>
      </a-col>
    </a-row>
  </Card>
</template>
